ant design table隔行换色以及自定义单元格数据

Posted on | In

最近做个表格，想做隔行换色以及自定义单元格数据展示的效果，到网上找了一些方法，算是大概实现了，记录一下。（总结还是一句话，多看API文档）

table页面展示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
constructor() {
    ...
    this.columns = [{
        title: 'Research Topic',
        dataIndex: 'name',
        sorter: true,
        className: 'topic-info',
        render: (text, record) => (
            <div>
                <p><Link to="/">{text.split("|")[0]}</Link></p>
                <p title={`${text.split("|")[1]}`}>{text.split("|")[1]}</p>
            </div>
        ),
    }, {
        title: 'Researchers',
        dataIndex: 'creatorName',
        sorter:true,
        width: '15%',
    }, {
        title: 'Created',
        dataIndex: 'created',
        sorter: true,
        width: '12%',
    }, {
        title: 'Updated',
        dataIndex: 'updated',
        sorter: true,
        width: '12%',
    }, {
        title: 'Operation',
        dataIndex: 'operation',
        width: '12%',
        render: (text, record) => (
            <span>
                <a>Edit</a>
                <Divider type="vertical" />
                <Popconfirm title="Sure to delete?" onConfirm={() => this.handleDelete(record.key)}>
                <a>Delete</a>
                </Popconfirm>
            </span>
        ),
    }];
    ...
}

render() {
    const { loading, error, topics, tags, topicNum, tagNum, current } = this.state;
    let data = [];
    topics.forEach((topic, idx) => {
        //data属性name是把两项内容拼接在一起，用的时候split一下
        data.push({
            key: topic.id,
            name: topic.name + "|" + topic.description,
            creatorName: topic.creatorName,
            created: formatDate(topic.created, "yyyy-MM-dd"),
            updated: formatDate(topic.updated, "yyyy-MM-dd"),
        });
    });
    return(
        <Table
            className={styles['table']}
            loading={loading}
            rowSelection={rowSelection}
            columns={this.columns}
            dataSource={data}
            pagination={false}
            bordered
            rowClassName={(record, idx) => {
                if(idx % 2 === 1)
                    return 'bg-row';
            }}
        />
    );
}
  • 隔行换色通过rowClassName指定要换色的行class名
  • 自定义单元格数据是通过columns设置里render()函数返回数据，class通过className指定
样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:global{
    .bg-row {
        background-color: $gray-color-12;
    }
    .topic-info {       
        p:first-child{
            font-family: Arial, sans-serif;
        }
        p+p {
            color: $gray-color-5;
            margin-left: 20px;
            text-indent: ellipsis;
        }
    }
}
  • 用global声明一个全局变量，如果bg-row和topic-info这两个类不在global里声明，而是在外面，Chrome f12调试的时候可以看到找不到这两个样式，不造为啥。